<template>
  <div>
    <!-- 金额 -->
    <div class="font-color-3 flex count-box pad-t-14">
      <span class="font-25 pad-t-10">￥</span>
      <span style="font-size:40px">{{orderPrice}}</span>
    </div>
    <div>
      <!-- 支付方式 -->
      <div>
        <div class="flex flex-between cell-box font-15 font-color-3" v-if="isOpenWholesaleWechat" @click="wxPayEvent">
          <div class="flex">
            <img class="width-24 height-21" :src="fileSpace+'/images/pay-wx.png'" v-if="fileSpace" alt="">
            <span>微信支付</span>
          </div>
          <div>
            <van-icon name="arrow" class="font-color-9"/>
          </div>
        </div>
        <div class="flex flex-between cell-box" @click="showAlert = true" v-if="isOpenWholesaleOffline">
          <div class="flex">
            <img class="width-24 height-21" :src="fileSpace+'/images/pay-online.png'" v-if="fileSpace" alt="">
            <span>线下支付</span>
          </div>
          <div>
            <van-icon name="arrow" class="font-color-9"/>
          </div>
        </div>
      </div>
      <!-- 温馨提示 -->
      <div class="pad-l-16 pad-t-5" v-if="isOpenWholesaleOffline">
        <span class="font-color-9 font-12">温馨提示：淘宝商品不支持线下付款</span>
      </div>
    </div>
    <!-- 弹窗 -->
    <van-dialog use-slot title="温馨提示" @confirm = "confirmPay" :show="showAlert" show-cancel-button @close="showAlert = false">
      <div class="pad-20 flex flex-center">
        选择后该笔订单将无法再修改支付方式是否确认选择【线下支付】？
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {getEnterprisePayMethodList, doPayProjectOrder} from '@/api/shop'
export default {
  data() {
    return {
      isOpenWholesaleWechat: 0, // 是否开启微信支付
      isOpenWholesaleOffline: 0, // 是否开启线下支付
      showAlert: false,
      orderId: '',
      orderPrice: ''
    }
  },
  mounted() {
    this.orderId = this.getCurrentPage().query.orderId
    this.getEnterprisePayMethodList()
  },
  methods: {
    // 获取企业支付方式
    getEnterprisePayMethodList() {
      getEnterprisePayMethodList({enterpriseId: this.getEnterpriseId, orderId: this.orderId}).then(res => {
        if (res.isError) return
        this.isOpenWholesaleOffline = res.data.isOpenWholesaleOffline || 0
        this.isOpenWholesaleWechat = res.data.isOpenWholesaleWechat || 0
        this.orderPrice = Number(res.data.orderPrice).toFixed(2)
      }).catch(err => {
        console.log(err)
      })
    },
    // 确认线下支付
    confirmPay() {
      console.log(this.orderId)
      let params = {
        orderId: this.orderId,
        payType: 5
      }
      this.doPayProjectOrder(params).then(res => {
        if (res.isError) {
          this.$utils.showToast({
            title: res.errorMsg
          })
          return
        }
        this.$pt.redirectTo({url: `/pages/shop/counter/offline-payments/main?orderId=${this.orderId}`})
      })
    },
    // 支付方式
    doPayProjectOrder(params) {
      return doPayProjectOrder(params)
    },
    wxPayEvent() {
      let params = {
        orderId: this.orderId,
        payType: 1
      }
      this.doPayProjectOrder(params).then(res => {
        const that = this
        that.$pt.requestPayment(
          {
            'timeStamp': res.data.timeStamp,
            'nonceStr': res.data.nonceStr,
            'package': res.data.package,
            'signType': res.data.signType,
            'paySign': res.data.paySign,
            'success': function() {
              that.$pt.redirectTo({url: '/pages/shop/result/main?successFlag=1&price=' + res.data.price +
                      '&orderId=' + that.orderId})
            },
            'fail': function() {
              that.$pt.redirectTo({url: '/pages/shop/result/main?successFlag=0&price=' + res.data.price +
                      '&orderId=' + that.orderId})
            }
          })
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .count-box{
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 18.5px;
  }
  .cell-box {
    padding-left: 16.5px;
    padding-bottom: 14px;
    padding-top: 13.5px;
    background: #fff;
    padding-right: 15.5px;
    border-bottom: 1px solid #f5f5f5;
    img {
      margin-right: 7.5px;
    }
  }
</style>